<template>
		<t-swiper :autoplay="true" :height="props.height" :navigation="{ type: 'dots-bar' }" >
		    <t-swiper-item v-for="(item, index) in list" :key="index">
		        <!-- <img :src="item.imageUrl" class="img" key="index" @click="clickBanner(item.id)"/> -->
				<t-image
				  class="image-container"
				  :style="{ height: '100%',width:'100%' }"
				  fit="fill"
				  :lazy='true'
				  :src="item.imageUrl"
				   @click="clickBanner(item.id)"
				></t-image>
		    </t-swiper-item>
		</t-swiper>
</template>

<script setup>

	import {
		onMounted,
		ref,
		defineExpose,
	} from "vue";
	import bannerApi from "@/api/bannerApi";
	const props = defineProps(["classify", "height"])
	const list = ref([]);
	const style = {
		width:"100%",
		height:props.height
	}
	// 获取banner
	const getBannerList = async () => {
		const result = await bannerApi.selectBanner(props.classify);
		list.value = result.data;
	}
	// 点击banner
	const clickBanner = async (bannerId) => {
		const result = await bannerApi.clickBanner(bannerId);
		if (result.code === 0) {
			
		}
	}
	const reload = () => {
	  getBannerList(); // 只有主动刷新时才调用
	};
	defineExpose({ reload });

	onMounted(() => {
		getBannerList();
	})
</script>

<style scoped>
	.swiper-item {
	  /* border-radius: 20rpx !important; */
	}
</style>